<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import {
    useRoute
  } from 'vue-router'
  import {
    getOfferingListApi,
  } from "@/assets/api/other/memorialHall.js"
  import {
    navigateBack
  } from "@/assets/scripts/navigate.js"

  import record from '@/components/record.vue'

  const meMemorialId = ref("")
  const lanternList = ref([])
  const pageNum = ref(1)
  const total = ref(10)
  const loading = ref(true)

  onMounted(() => {
    route_init() // 路由参数
    lanternList_init() // 请求记录数据
  })

  const handleMore = () => {
    if (loading.value) return
    loading.value = true
    pageNum.value = pageNum.value + 1
    lanternList_init() // 请求记录数据
  }

  const route_init = async () => {
    const route = useRoute()
    if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
      meMemorialId.value = route.query.meMemorialId
    }
  }

  const lanternList_init = async () => {
    const res = await getOfferingListApi(meMemorialId.value, '灯笼', '')
    if (res.code === 200) {
      total.value = res.total
      const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
      lanternList.value = [...lanternList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
      loading.value = false
    }
  }
</script>

<template>
  <view class="">
    <uv-navbar :fixed="false" bgColor="#f8f8f8" @leftClick="navigateBack" title="挂灯笼记录">
    </uv-navbar>
    <view class="mt-normal px-normal">
      挂灯笼记录[{{total}}]
    </view>
    <view class="mt-normal px-normal" v-for="(item, index) in lanternList" :key="index">
      <record :data="item"></record>
    </view>
    <uv-button class="mb-normal" style="width: 100%;" v-if="!loading && total > pageNum * 10" type="success" text="查看更多"
      @click="handleMore"></uv-button>
  </view>
</template>

<style lang="scss" scoped>
</style>